<script setup lang="ts">
import ImgPreview from '@/components/img-preview/index.vue';
import { useThemeToken } from '@/hooks';
import { useCareStore } from '@/store';
import { getBedSelectName } from '@/tools/old-form';
import type { AllFormSubmitFields } from '@/types';
import { ManOutlined, WomanOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

const { levelsMap } = storeToRefs(useCareStore());

const token = useThemeToken();

defineProps<{
	item: Pick<AllFormSubmitFields, 'Name' | 'Age' | 'Sex' | 'Bed' | 'CareLevel' | 'ID' | 'Avatar'>;
}>();

</script>

<template>
	<a-card hoverable class="w-240 card h-300">
		<template #cover>
			<ImgPreview :height="128" :src="item.Avatar" />
		</template>
		<RouterLink :to="{ path: `/personnel/old/detail/${item?.ID || ''}` }">
			<div class="flex justify-between mb-10">
				<div>
					{{ item.Name }}
					<ManOutlined v-if="item.Sex === 1" class="color-blue" />
					<WomanOutlined v-else class="color-pink" />
				</div>
				<a-tag :color="token.colorPrimary" class="mr-0">入住</a-tag>
			</div>
			<a-form-item class="mb-0" label="年龄">{{ item.Age }}</a-form-item>
			<a-form-item class="mb-0" label="楼房号">{{ getBedSelectName(item) }}</a-form-item>
			<a-form-item class="mb-0" label="照护等级">{{ levelsMap.get(item.CareLevel) || '-' }}</a-form-item>
		</RouterLink>
	</a-card>
</template>
<style lang="less" scoped>
.card {
	:deep(.ant-card-body) {
		padding: 10px;
	}

	:deep(label) {
		color: #999;
	}
}
</style>
